<template>
  <el-card shadow="hover" class="info-card" :body-style="card_style">
    <div class="wrapper">
      <!-- 头部 -->
      <article class="card-head">
        <span class="span-style">{{ title }}</span>
        <div class="btn-body">
          <el-button
            type="primary"
            size="mini"
            icon="el-icon-view"
            circle
            @click="dialogVisible = true"
            v-hasPermi="[isImgCard ?  'farm:developImage:list':'farm:develop:query']"
          ></el-button>
          <el-button
            type="primary"
            size="mini"
            icon="el-icon-edit"
            circle
            @click="showDialog(isImgCard)"
            v-hasPermi="[isImgCard ?  'farm:developImage:edit':'farm:develop:edit']"
          ></el-button>
        </div>
      </article>
      <!-- 内容 -->
      <article class="content" v-if="content !== ''" v-html="content">
        {{ content }}
      </article>
      <!-- 图片 -->
      <article class="picture" v-if="isImgCard">
        <div
          :class="'img-wrapper' + index"
          v-for="(item, index) in picture"
          :key="item.id"
        >
          <img :src="item.developImageUrl" alt="暂无图片" v-if="index < 3" />
        </div>
      </article>
    </div>

    <!-- 查看弹框 -->
    <el-dialog
      title="查看"
      :visible.sync="dialogVisible"
      width="60%"
      class="dialog"
    >
      <span class="title">{{ title }}</span>
      <article class="dialogContent" v-if="content" v-html="content"></article>
      <article class="dialogContent" v-if="picture.length">
        <el-image
          v-for="item in picture"
          class="img-warapper"
          :src="item.developImageUrl"
          :preview-src-list="srcList"
          :key="item.id"
        />
      </article>
    </el-dialog>

    <!-- 编辑弹框 -->
    <el-dialog
      title="编辑"
      :visible.sync="dialogVisible2"
      width="60%"
      class="dialog"
      :before-close="handleClose"
    >
      <article class="dialogContent" style="visibility: visible">
        <editForm ref="ruleForm" :content="content" />
      </article>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible2 = false">取 消</el-button>
        <el-button type="primary" @click="formSubmit">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 编辑图片弹框 -->
    <el-dialog
      title="图片编辑"
      :visible.sync="dialogVisible3"
      width="60%"
      class="dialog"
      :before-close="handleClose"
      @close="showCheck = false"
    >
      <span><span style="color: red">* </span>标题:</span>
      <el-input
        type="text"
        v-model="oldtitle"
        autocomplete="off"
        style="width: 60%; margin: 0 10px"
        maxlength="50" :show-word-limit="true"
      ></el-input>
      <el-button
        :type="!showCheck ? 'primary' : 'info'"
        round
        @click="showCheck ? (showCheck = false) : (showCheck = true)"
        >{{ `${!showCheck ? "选择展示的图片" : "取消选择"}` }}</el-button
      >
      <article class="dialogContent">
        <div class="flexBox">
          <div class="img-content" v-for="item in picture" :key="item.id">
            <el-image
              class="img-warapper editImg"
              :src="item.developImageUrl"
            />
            <i
              class="el-icon-delete deletePosition"
              @click="deleteImg(item.id)"
              v-show="!showCheck"
              v-hasPermi="['farm:developImage:remove']"
            ></i>
            <div class="checkbox">
              <el-checkbox
                v-show="showCheck"
                @change="checkboxChange(item.id, $event)"
                ref="checkRef"
              ></el-checkbox>
            </div>
          </div>
          <div class="addImgWrapper">
            <editImage @input="editImageInput($event)" v-hasPermi="['farm:developImage:add']"/>
            <!-- <uploadImg /> -->
            <span class="content">
              上传大小不超过
              <span style="color: red">5MB</span> 格式为
              <span style="color: red">png/jpg/jpeg</span> 的图片
            </span>
          </div>
        </div>
      </article>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible3 = false">取 消</el-button>
        <el-button type="primary" @click="developImage">确 定</el-button>
      </span>
    </el-dialog>
  </el-card>
</template>

<script>
import editForm from "@/components/IndustryInfo/editForm.vue";
import editImage from "@/components/IndustryInfo/editImage";
import uploadImg from "@/components/UploadImage";
import {
  setDevelopInfo,
  addImage,
  developImageSetIsShow,
  deleteImage,
  updateImageTitle,
  editImgTitle
} from "@/api/info/develop";

export default {
  name: "InfoCard",
  components: {
    editForm,
    editImage,
    uploadImg,
  },
  props: {
    isImgCard: {
      type: Boolean,
      default: false,
    },
    id: {
      type: Number,
    },
    title: {
      type: String,
      default: "",
    },
    content: {
      type: String,
      default: "",
    },
    picture: {
      type: Array,
      default: () => [],
    },
  },
  watch: {
    dialogVisible3(val) {
      if (!val) {
        this.infoRefresh();
      }
      else{
        this.oldtitle = this.title;
      }
    },
  },
  computed: {
    srcList: function () {
      let arr = [];
      this.picture.map((item) => {
        arr.push(item.developImageUrl);
      });
      return arr;
    },
    // _title: {
    //   get() {
    //     return this.title;
    //   },
    //   set(val) {
    //     this.$emit('update:title', val);
    //   }
    // }
  },
  data() {
    return {
      oldtitle: '',
      checkObj: {},
      checkList: [],
      pictureList: [],
      showCheck: false,
      dialogVisible: false, // 查看弹框
      dialogVisible2: false, // 编辑弹框
      dialogVisible3: false, // 编辑弹框
      card_style: { padding: "17px 16px 8px 17px", height: "184px" },
      rules: {
        title: [{ required: true, trigger: "blur", message: "请填写标题" }],
      },
      developImageUrl: "",
    };
  },
  methods: {
    formSubmit() {
      this.$refs.ruleForm.$children[0].validate((valid) => {
        if (valid) {
          let formData = {
            id: this.id,
            developTitle: this.$refs.ruleForm._data.ruleForm.title,
            developContent: this.$refs.ruleForm._data.ruleForm.content,
          };
          setDevelopInfo(formData, "put").then(() => {
            this.msgSuccess("修改成功");
            this.dialogVisible2 = false;
            this.infoRefresh();
          });
        } else {
          console.log("校验失败!");
          return false;
        }
      });
    },
    developImage() {
      if (this.oldtitle !== this.title) {
        editImgTitle({ developImageTitle: this.oldtitle })
          .then(() => {
            this.msgSuccess("修改标题成功");
          })
          .catch(() => {
            this.msgError("修改标题失败");
          });
      }
      if (this.checkList.length > 0) {
        developImageSetIsShow(this.checkList.join(","))
          .then((res) => {
            this.msgSuccess("设置展示图片成功");
          })
          .catch((e) => {
            this.$message.error(e);
          });
        Object.keys(this.$refs.checkRef).map((key) => {
          this.$refs.checkRef[key].selfModel = false;
        });
      }
      this.infoRefresh();
      this.dialogVisible3 = false;
    },
    showDialog() {
      if (!this.isImgCard) {
        this.dialogVisible2 = true;
        this.$nextTick(() => {
          this.$refs.ruleForm &&
            (this.$refs.ruleForm._data.ruleForm.title = this.title);
        });
      } else {
        this.dialogVisible3 = true;
      }
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(() => {
          done();
        })
        .catch(() => {});
    },
    deleteImg(id) {
      this.$confirm(`确定要删除图片吗`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(function () {
          return deleteImage(id);
        })
        .then(() => {
          this.msgSuccess("删除成功");
          this.$emit('refreshImgList')
        })
        .catch(function () {
          this.$message.error("删除失败");
        });
    },
    checkboxChange(id, status) {
      this.checkObj[id] = status;
      this.checkArray = new Set();
      Object.keys(this.checkObj).forEach((key) => {
        if (this.checkObj[key] === true) {
          this.checkArray.add(key);
        } else {
          this.checkArray.delete(key);
        }
      });
      this.checkList = Array.from(this.checkArray);
    },
    editImageInput(path) {
      addImage({
        developImageTitle: this.title,
        developImageUrl: path,
      }).then(() => {
        this.msgSuccess("添加成功");
        this.$emit('refreshImgList')
      });
    },
    infoRefresh() {
      this.$emit("infoCard_click");
    },
  },
};
</script>

<style lang="scss" scope>
.info-card {
  width: 290px;
  height: 174px;
  background-color: #e8f2ff;
  .wrapper {
    .card-head {
      margin-left: 5px;
      display: flex;
      justify-content: space-between;
      > span {
        display: inline-block;
        height: 26px;
        font-size: 22px;
        overflow: hidden;
      }
      .btn-body {
        .btn {
          display: inline-block;
          width: 28px;
          height: 28px;
          line-height: 28px;
          text-align: center;
          border-radius: 50%;
          > i {
            color: white;
            font-size: 12px;
          }
          margin-left: 12px;
        }
        .btn:hover {
          box-shadow: 0px 0px 6px grey;
          transition: all 0.2s;
        }
        .blue {
          background-color: #388efc;
        }
      }
      > span {
        width: 65%;
        display: inline-block;
        margin-bottom: 5px;
      }
    }
    .content {
      display: inline-block;
      font-size: 14px;
      height: 110px;
      word-break: break-all;
      overflow-y: scroll;
      color: black;
    }
    ::-webkit-scrollbar {
      display: none;
    }
    .picture {
      position: relative;
      top: 15px;
      left: 50%;
      margin-left: -90px;
      height: 100px;
      width: 100%;
      overflow: hidden;
      .img-wrapper0 {
        position: absolute;
        top: 0;
        z-index: 3;
        width: 145px;
        height: 100px;
        margin-bottom: 10px;
        overflow: hidden;
        > img {
          width: 100%;
          height: 100%;
        }
      }
      .img-wrapper1 {
        position: absolute;
        top: 4px;
        left: 22px;
        z-index: 2;
        width: 140px;
        height: 90px;
        margin-bottom: 10px;
        overflow: hidden;
        > img {
          width: 100%;
          height: 100%;
        }
      }
      .img-wrapper2 {
        position: absolute;
        top: 7px;
        left: 39px;
        z-index: 1;
        width: 140px;
        height: 80px;
        margin-bottom: 10px;
        overflow: hidden;
        > img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
  .dialog {
    .title {
      font-size: 18px;
      font-family: Source Han Sans CN-Medium, Source Han Sans CN;
      font-weight: 500;
      color: #333333;
    }
    .dialogContent {
      max-height: 300px;
      margin-top: 28px;
      overflow-y: scroll;
      font-size: 16px;
      font-family: Source Han Sans CN-Regular, Source Han Sans CN;
      font-weight: 400;
      color: #333333;
      .flexBox {
        display: flex;
        flex-flow: wrap;
        .el-upload--picture-card {
          width: 150px;
          height: 150px;
        }
        .img-content {
          position: relative;
          .deletePosition {
            position: absolute;
            top: 127px;
            left: 66px;
            z-index: 9999;
            color: #fff;
          }
          .deletePosition:hover {
            color: red;
            cursor: pointer;
          }
        }
        .checkbox {
          width: 150px;
          text-align: center;
        }
        .addImgWrapper {
          position: relative;
          min-height: 250px;
          .content {
            display: inline-block;
            position: absolute;
            left: 25px;
            width: 130px;
            font-size: 13px;
            margin: 5px 0 0 -13px;
            text-align: center;
            word-wrap: break-word;
            z-index: 99;
          }
        }
      }
    }
    .img-warapper {
      width: 150px;
      height: 150px;
      margin-right: 8px;
      border-radius: 5px;
      display: inline-block;
    }
  }
}
.el-image-viewer__close {
  color: #fff;
}
.span-style {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>
